<template>
  <div class="content travelGuide">
    <THeader :active="this.$route.path"></THeader>
    <el-row style="padding: 40px 0;">
      <el-col :span="9" :offset="12">
        <el-input size="large" v-model="searchText" placeholder="请输入内容">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width:100px">
            <el-option label="所有" value="-1"></el-option>
            <el-option label="游记" value="2"></el-option>
            <el-option label="攻略" value="0"></el-option>
          </el-select>
          <el-button @click="searchGuide" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <router-view/>
  </div>
</template>

<script>
//旅游攻略
export default {
  name: "travelGuide",
  data() {
    return {
      searchText: "",
      select: "0"
    };
  },
  methods: {
    searchGuide() {
      if (this.select) {
        this.$router.push({
          path: `/travel-reference/article`,
          query: { search: this.searchText, state: this.select }
        });
      }
    }
  }
};
</script>
<style lang="less">
.travelGuide {
  .elevator-module {
    position: fixed;
    top: 300px;
    right: 25px;
    margin-left: 500px;
    .nav-list {
      position: relative;
      background-color: #f6f9fa;
      border: 1px solid #e5e9ef;
      overflow: hidden;
      border-radius: 4px;
      .item {
        width: 80px;
        height: 32px;
        line-height: 32px;
        transition: background-color 0.3s, color 0.3s;
        text-align: center;
        cursor: pointer;
        user-select: none;
      }
    }
  }
}
</style>
